<template>
  <div class="responsive-layout" :class="layoutClasses">
    <!-- 主容器 -->
    <div class="layout-container" :style="containerStyle">
      <!-- 头部区域 -->
      <header v-if="$slots.header" class="layout-header" :class="headerClasses">
        <slot name="header"></slot>
      </header>

      <!-- 主体区域 -->
      <main class="layout-main" :class="mainClasses">
        <!-- 侧边栏 -->
        <aside 
          v-if="$slots.sidebar && showSidebar" 
          class="layout-sidebar" 
          :class="sidebarClasses"
          :style="sidebarStyle"
        >
          <slot name="sidebar"></slot>
        </aside>

        <!-- 内容区域 -->
        <section class="layout-content" :class="contentClasses" :style="contentStyle">
          <slot></slot>
        </section>
      </main>

      <!-- 底部区域 -->
      <footer v-if="$slots.footer" class="layout-footer" :class="footerClasses">
        <slot name="footer"></slot>
      </footer>
    </div>

    <!-- 移动端侧边栏遮罩 -->
    <div 
      v-if="isMobile && showSidebar && sidebarVisible" 
      class="sidebar-overlay"
      @click="closeSidebar"
    ></div>

    <!-- 移动端侧边栏 -->
    <transition name="sidebar-slide">
      <aside 
        v-if="isMobile && $slots.sidebar && sidebarVisible"
        class="mobile-sidebar"
        :style="mobileSidebarStyle"
      >
        <div class="mobile-sidebar-header">
          <slot name="sidebar-header">
            <button class="sidebar-close" @click="closeSidebar">
              <i class="el-icon-close"></i>
            </button>
          </slot>
        </div>
        <div class="mobile-sidebar-content">
          <slot name="sidebar"></slot>
        </div>
      </aside>
    </transition>
  </div>
</template>

<script setup>
import { computed, ref, watch } from 'vue'
import { useResponsive } from '../utils/responsive'

// Props
const props = defineProps({
  // 布局类型
  layout: {
    type: String,
    default: 'default', // default, sidebar, full
    validator: (value) => ['default', 'sidebar', 'full'].includes(value)
  },
  // 容器最大宽度
  maxWidth: {
    type: String,
    default: 'auto'
  },
  // 是否固定头部
  fixedHeader: {
    type: Boolean,
    default: false
  },
  // 是否固定侧边栏
  fixedSidebar: {
    type: Boolean,
    default: false
  },
  // 侧边栏宽度
  sidebarWidth: {
    type: String,
    default: 'auto'
  },
  // 是否显示侧边栏
  showSidebar: {
    type: Boolean,
    default: true
  },
  // 内容区域内边距
  contentPadding: {
    type: String,
    default: '20px'
  },
  // 是否启用安全区域
  safeArea: {
    type: Boolean,
    default: true
  },
  // 自定义断点
  breakpoints: {
    type: Object,
    default: () => ({})
  }
})

// Emits
const emit = defineEmits(['sidebar-toggle', 'sidebar-close', 'sidebar-open'])

// 响应式数据
const { 
  isMobile, 
  isTablet, 
  isDesktop, 
  deviceType 
} = useResponsive()

// 默认容器最大宽度和侧边栏宽度
const containerMaxWidth = computed(() => {
  if (isMobile.value) return '100%'
  if (isTablet.value) return '768px'
  return '1200px'
})

const defaultSidebarWidth = computed(() => {
  if (isMobile.value) return '280px'
  return '240px'
})

const sidebarVisible = ref(false)

// 计算属性
const layoutClasses = computed(() => ({
  [`layout-${props.layout}`]: true,
  [`device-${deviceType.value}`]: true,
  'fixed-header': props.fixedHeader,
  'fixed-sidebar': props.fixedSidebar,
  'sidebar-visible': sidebarVisible.value,
  'safe-area': props.safeArea
}))

const containerStyle = computed(() => ({
  maxWidth: props.maxWidth === 'auto' ? containerMaxWidth.value : props.maxWidth
}))

const headerClasses = computed(() => ({
  'header-fixed': props.fixedHeader,
  'safe-area-top': props.safeArea
}))

const mainClasses = computed(() => ({
  'main-with-sidebar': props.showSidebar && !isMobile.value,
  'main-fixed-header': props.fixedHeader
}))

const sidebarClasses = computed(() => ({
  'sidebar-fixed': props.fixedSidebar,
  'sidebar-hidden': !props.showSidebar
}))

const sidebarStyle = computed(() => ({
  width: props.sidebarWidth === 'auto' ? defaultSidebarWidth.value : props.sidebarWidth,
  display: isMobile.value ? 'none' : 'block'
}))

const mobileSidebarStyle = computed(() => ({
  width: props.sidebarWidth === 'auto' ? '280px' : props.sidebarWidth
}))

const contentClasses = computed(() => ({
  'content-with-sidebar': props.showSidebar && !isMobile.value,
  'content-full': !props.showSidebar || isMobile.value
}))

const contentStyle = computed(() => ({
  padding: props.contentPadding,
  marginLeft: props.showSidebar && !isMobile.value && !props.fixedSidebar 
    ? (props.sidebarWidth === 'auto' ? defaultSidebarWidth.value : props.sidebarWidth) 
    : '0'
}))

const footerClasses = computed(() => ({
  'safe-area-bottom': props.safeArea
}))

// 方法
function toggleSidebar() {
  sidebarVisible.value = !sidebarVisible.value
  emit('sidebar-toggle', sidebarVisible.value)
}

function openSidebar() {
  sidebarVisible.value = true
  emit('sidebar-open')
}

function closeSidebar() {
  sidebarVisible.value = false
  emit('sidebar-close')
}

// 监听移动端状态变化
watch(isMobile, (newVal) => {
  if (!newVal) {
    sidebarVisible.value = false
  }
})

// 暴露方法
defineExpose({
  toggleSidebar,
  openSidebar,
  closeSidebar,
  sidebarVisible
})
</script>

<style scoped>
.responsive-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.layout-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  width: 100%;
}

/* 头部样式 */
.layout-header {
  background: var(--el-bg-color);
  border-bottom: 1px solid var(--el-border-color-light);
  z-index: 1000;
}

.header-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001;
}

/* 主体区域 */
.layout-main {
  flex: 1;
  display: flex;
  min-height: 0;
}

.main-fixed-header {
  margin-top: 60px; /* 根据头部高度调整 */
}

/* 侧边栏样式 */
.layout-sidebar {
  background: var(--el-bg-color);
  border-right: 1px solid var(--el-border-color-light);
  overflow-y: auto;
  flex-shrink: 0;
}

.sidebar-fixed {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 999;
}

.sidebar-hidden {
  display: none;
}

/* 移动端侧边栏 */
.mobile-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  background: var(--el-bg-color);
  z-index: 1002;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}

.mobile-sidebar-header {
  padding: 16px;
  border-bottom: 1px solid var(--el-border-color-light);
  display: flex;
  justify-content: flex-end;
}

.sidebar-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--el-text-color-regular);
  padding: 4px;
}

.mobile-sidebar-content {
  flex: 1;
  overflow-y: auto;
}

.sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1001;
}

/* 侧边栏动画 */
.sidebar-slide-enter-active,
.sidebar-slide-leave-active {
  transition: transform 0.3s ease;
}

.sidebar-slide-enter-from,
.sidebar-slide-leave-to {
  transform: translateX(-100%);
}

/* 内容区域 */
.layout-content {
  flex: 1;
  background: var(--el-bg-color-page);
  overflow-y: auto;
  min-height: 0;
}

.content-with-sidebar {
  margin-left: 0;
}

.content-full {
  width: 100%;
}

/* 底部样式 */
.layout-footer {
  background: var(--el-bg-color);
  border-top: 1px solid var(--el-border-color-light);
  margin-top: auto;
}

/* 设备特定样式 */
.device-mobile .layout-main {
  flex-direction: column;
}

.device-mobile .layout-content {
  margin-left: 0 !important;
}

/* 安全区域 */
.safe-area .safe-area-top {
  padding-top: var(--safe-area-inset-top, 0);
}

.safe-area .safe-area-bottom {
  padding-bottom: var(--safe-area-inset-bottom, 0);
}

/* 布局类型 */
.layout-full .layout-container {
  max-width: 100%;
}

.layout-sidebar .layout-main {
  margin-left: 0;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .layout-content {
    padding: 16px !important;
  }
  
  .main-fixed-header {
    margin-top: 50px;
  }
}

@media (max-width: 480px) {
  .layout-content {
    padding: 12px !important;
  }
}

/* 深色主题适配 */
.dark .layout-header,
.dark .layout-sidebar,
.dark .mobile-sidebar {
  background: var(--el-bg-color);
  border-color: var(--el-border-color);
}

.dark .layout-content {
  background: var(--el-bg-color-page);
}

.dark .sidebar-overlay {
  background: rgba(0, 0, 0, 0.7);
}
</style>